<template>
  <el-form ref="formRef" :model="formData" label-width="100px" v-loading="formLoading" disabled>
    <el-row :span="20">
      <el-col :span="16">
        <el-form-item label="主题" prop="theme">
          <el-input v-model="formData.theme" placeholder="请输入主题" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="发起部门" prop="deptId">
          <el-tree-select
            v-model="formData.deptId"
            :data="deptList"
            :props="defaultProps"
            check-strictly
            node-key="id"
            placeholder="请选择发起部门"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="内容简介" prop="theme">
      <el-input v-model="formData.content" placeholder="请输入内容简介" />
    </el-form-item>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="有效日期" prop="daterange">
          <el-date-picker
            v-model="formData.daterange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 公函人员 -->
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="查阅公函人员" name="first">
        <el-table ref="multipleTableRef" :data="tableUserData" style="width: 100%; margin-top: 10px; height: 200px;">
          <el-table-column label="序号" type="index"  header-align="center" align="center" width="60px" fixed />
          <el-table-column label="用户昵称" align="center" prop="userName" :show-overflow-tooltip="true" />
          <el-table-column label="部门" align="center" key="deptId" prop="deptId" :show-overflow-tooltip="true">
            <template #default="scope">
              {{ deptList.find((dept) => dept.id === scope.row.deptId)?.name }}
            </template>
          </el-table-column>
          <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="附件列表" name="second">        
        <el-table ref="multipleTableRef" :data="uploadList" style="width: 100%; margin-top: 10px; height: 200px;">
          <el-table-column label="序号" type="index"  header-align="center" align="center" width="60px" fixed />
          <el-table-column label="文件名称" align="center" prop="name" :show-overflow-tooltip="true" />
          <el-table-column label="文件路径" align="center" prop="url" :show-overflow-tooltip="true" />
          <el-table-column label="操作" align="center" fixed="right" width="140px">
            <template #default="scope">
              <el-link type="primary" download :href="scope.row.url" :underline="false" target="_blank">下载</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-form-item label="公函内容">
      <Editor v-model="formData.remark" height="200px" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { BaseOfficialLetterApi, BaseOfficialLetterVO, BaseOfficialLetterRecordVO } from '@/api/infra/baseofficialletter'
import * as UserApi from '@/api/system/user'
import * as DeptApi from '@/api/system/dept'
import * as OperateLogApi from '@/api/system/operatelog'

import { dateFormatter } from '@/utils/formatTime'
import { CommonStatusEnum } from '@/utils/constants'
import { DICT_TYPE } from '@/utils/dict'
import type { UploadUserFile } from 'element-plus'
import { ref, defineProps } from 'vue'

/** 公函 表单 */
defineOptions({ name: 'ViewOfficialForm' })

const props = defineProps({
  id: {
    type: Number
  }
})
onMounted(() => {
  open(props.id)
})

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const uploadList = ref<UploadUserFile[]>([])
const tableUserData = ref<UserApi.UserVO[]>([])
const deptList = ref<DeptApi.DeptVO>([])
const activeName = ref('first')
const dialogVisible = ref(false) // 弹窗的是否展示
const userBio = ref('')
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: undefined,
  theme: undefined,
  daterange: undefined,
  startDate: undefined,
  endDate: undefined,
  fileExists: undefined,
  content: undefined,
  remark: undefined,
  imageAddress: undefined,
  status: CommonStatusEnum.ENABLE,
  detailData: undefined,
  fileData: undefined
})

/** 查询列表 */
const open = async (id) => {
  resetForm()
  tableUserData.value = []
  uploadList.value = []
  userBio.value = ''
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await BaseOfficialLetterApi.getBaseOfficialLetter(id)
      formData.value.daterange = [formData.value.startDate, formData.value.endDate]
      userBio.value = formData.value.remark

      tableUserData.value = await BaseOfficialLetterApi.getLetterUserList(id)

      uploadList.value = await BaseOfficialLetterApi.getLetterFileList(id)
    } finally {
      formLoading.value = false
    }
  }
  deptList.value = await DeptApi.getAllList()
}
const handleClick = async (tab, event) => {
  activeName.value = tab.props.name
  if (tab.props.name === 'second') {
    tableUserData.value = await BaseOfficialLetterApi.getLetterUserList(props.id)
  } else if (tab.props.name === 'third') {
    uploadList.value = await BaseOfficialLetterApi.getLetterFileList(props.id)
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    theme: undefined,
    daterange: undefined,
    startDate: undefined,
    endDate: undefined,
    fileExists: undefined,
    content: undefined,
    remark: undefined,
    imageAddress: undefined,
    status: CommonStatusEnum.ENABLE,
    detailData: undefined,
    fileData: undefined
  }
  tableUserData.value = []
  uploadList.value = []
}
</script>

<style scoped lang="scss">
.el-drawer__body {
    flex: 1;
    overflow: auto;
}
.el-drawer__header {
  align-items: center;
  color: #72767b;
  display: flex;
  padding: var(--el-drawer-padding-primary);
  padding-bottom: 0;
}
.first{
  line-height:25px;
  font-size:18px;
  color:#8a8a8a;
  display:flex;
  :deep(.el-icon){
    margin-top:5px !important
  }
}
.left{
  margin-left:12px
}
.second{
  background:#fff;
  padding:15px 20px;
  display:flex;
  margin-top:10px;
}
.logo{
  height:80px;
  width:80px
}
.main{
  margin-left:30px;
  width:calc(100% - 110px)
}
.m-top{
  display: flex;
  justify-content: space-between;
}
.m-tleft{
  display:flex
}
.gender{
  height:20px;
  width:20px;
  margin:3px 8px 0 8px
}
.age{
  color:#8a8a8a;
  line-height:26px
}
.tag1{
  padding:5px 10px;
  color:#4341ff;  
  border:1px solid #4341ff;
  margin-top: 10px;
  font-size:14px
}
.tag2{
  padding:5px  10px;
  color:#dc806f;
  border:1px solid #dc806f;
  margin-left:10px;
  margin-top: 10px;
  font-size:14px
}
.tag3{
  padding:5px  10px;
  color:#787878;
  margin-top: 10px;
  margin-left:10px;
  border:1px solid #787878;
  font-size:14px
}
.name{
  font-size:20px;
  font-weight:bold
}
.m-bottom{
  margin:20px 0;
}
:deep(.el-descriptions__label){
  font-size:16px;
  color:#8a8a8a
}
:deep(.el-descriptions__content){
  font-size:16px;
  color:#333
}
.third{
  background:#fff;
  margin-top:10px;
  padding:15px
}
:deep(.el-tabs__item){
  padding:0 30px !important;
}
</style>